
<!--
	作者：lsd
	时间：2020-4-15
	描述：采购员工厂配置
-->
<template>
	<div class="m-view-purcheaserFactory m-window">
    	<!-- 搜索头 -->
		<div class="m-condition">
			<el-row :gutter="5">
				<el-form
					:model="formSearch"
					ref="formSearch"
					label-width="70px"
					:inline-message="true"
					label-position="left"
				>
					<el-col :span="5">
						<el-form-item label="采购员" class="rightItem">
							<el-input
								value-key="id"
								v-model.trim="formSearch.sapNum"
								placeholder="请输入"
								clearable
								maxlength="20"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="9">
						<el-form-item label="工厂" class="rightItem">
							<el-input
								value-key="id"
								v-model.trim="formSearch.plantCode"
								placeholder="请输入"
								clearable
								maxlength="20"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="2">
						<el-checkbox @change="search(true)" v-model="formSearch.state">显示停用</el-checkbox>
					</el-col>
				</el-form>

				<el-col :span="2" >
					<el-button type="primary" @click="search(true)">查询</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" @click="openPurchaserFactoryDia(false)">新增</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" @click="openPurchaserFactoryDia(true)">编辑</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" v-show="!formSearch.state" @click="isProhibitPurcheaserFactory">停用</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" v-show="formSearch.state" @click="isProhibitPurcheaserFactory">启用</el-button>
				</el-col>
			</el-row>
		</div>

    <!-- 表单 -->
		<div class="m-agTable m-bottom" v-loading="loading">
			<agGridComponents
				ref="agGridComponent"
				:getGridOptions="gridOptions"
				:getColumnDefs="columnDefs"
				:getRowSelection="'multiple'"
				:isColFit="true"
			></agGridComponents>
		</div>

    <!-- 页脚 -->
		<div class="m-page">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageInfo.currentPage"
				:page-sizes="[30,50,100,150,200 ]"
				:page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</div>

    <!-- 新增窗口 -->
		<el-dialog
			:title="`${isEdit?'编辑':'新增'}工厂采购员`"
			:visible.sync="diaPurcheaserFactory"
			width="60"
			v-dialogDrag
			:before-close="closeDia"
			:close-on-click-modal="false"
			:close-on-press-escape="false">
			<el-form
				:model="formPurchaserFactory"
				v-loading="loadingDia"
				ref="formPurchaserFactory"
				label-width="100px"
				class="demo-ruleForm"
				:rules="rules">
				<el-form-item label="工厂" prop="plantCode">
					<el-select 
						v-model="formPurchaserFactory.plantCode" 
						filterable 
						:filter-method="filterFactory"
						placeholder="请选择工厂">
						<el-option
							v-for="item in optionsFactory"
							:key="item.plantCode"
							:label="item.plantName"
							:value="item.plantCode">
							<span style="float: left">{{ item.plantName }}</span>
							<span style="float: right; color: #8492a6; font-size: 13px">{{ item.plantCode }}</span>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="采购员" prop="sapNum">
					<el-select 
						v-model="formPurchaserFactory.sapNum" 
						filterable 
						:disabled="isEdit"
						:filter-method="filterSupplier"
						placeholder="请选择采购员">
						<el-option
							v-for="item in optionsPurcheaser"
							:key="item.sapNum"
							:label="item.purcheaserName"
							:value="item.sapNum">
							<span style="float: left">{{ item.purcheaserName }}</span>
							<span style="float: right; color: #8492a6; font-size: 13px">{{ item.sapNum }}</span>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="管理者标识" prop="adminFlag">
					<el-select 
						v-model="formPurchaserFactory.adminFlag" placeholder="请选择管理员标识">
						<el-option label="管理员" :value="0"></el-option>
						<el-option label="非管理员" :value="1"></el-option>
					</el-select>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="closeDia">取消</el-button>
				<el-button type="primary" @click="addPurcheaser(false)" :loading="loadingDia">保存</el-button>
				<el-button type="primary" v-show="!isEdit" @click="addPurcheaser(true)" :loading="loadingDia">保存并继续</el-button>
			</span>
		</el-dialog>

  </div>
</template>
  
<script>
  import agGridComponents from "@/components/agGridComponents.js";
  import _Api from "@/api";
  import localeText from "@/i18n/agGridText";

  /**
   * @group purcheaserFactory
   * 采购员管理
   */
  export default {
    name: 'purcheaserFactory',
    components:{
      agGridComponents,
    },
    data(){
      return {
        formSearch:{//查询表
					sapNum: '',
					plantCode: '',
					state: false,
        },
        formPurchaserFactory:{ //新增&编辑采购员表
          plantCode: '',
					sapNum: '',
					state: 0,
					adminFlag: 0
				},
				isEdit: false,
				optionsFactory: [], //工厂下拉框列表
				optionsTempFactory: [], //工具人，专门用来过滤的
				optionsPurcheaser: [],//采购员下拉框列表
				optionsTempPurcheaser: [],//工具人，专门用来过滤的
			  rowData: [], // 表格数据
			  //表格参数
			  gridOptions: '',
			  columnDefs: [],
			  //页脚参数
			  pageInfo: {
			  	pageSize: 30,
			  	currentPage: 1,
				},
				total: 0,
			  //弹窗参数
        diaPurcheaserFactory: false,//新增&编辑采购员工厂弹框
			  //加载参数
			  loading: false,//页面的
        loadingDia: false,//弹框的
        rules: {
			  	plantCode: [{
			  		required: true,
			  		trigger: ['blur', 'change'],
			  		message: "不能为空",
			  	}],
			  	sapNum: [{
			  		required: true,
			  		trigger: ['blur', 'change'],
			  		message: "不能为空",
					}],
					adminFlag: [{
			  		required: true,
			  		trigger: ['blur', 'change'],
			  		message: "不能为空",
			  	}]
			  }
      }
    },
    beforeMount () {
	  	this.gridOptions = {
	  		context: {
	  			componentParent: this
	  		},
	  		enableColResize: true,
	  		localeText: localeText,
	  		suppressRowClickSelection: true,//单元格选中,false为选中整行
	  	};
	  	this.columnDefs = [
	  		{	headerName: "采购员", field: "purcheaserName", width: 130,
	  			checkboxSelection: true,
	  			headerCheckboxSelection: true			},
	  		{ headerName: "工号", field: "sapNum", width: 120 },
				{ headerName: "工厂", field: "plantName", width: 200 },
				{ headerName: "管理员状态", field: "adminFlag", width: 120,
	  			cellRenderer: (params) => {
	  				if (params.value == 0) {
	  					return '管理员';
	  				} else {
	  					return '非管理员';
	  				}
					}
				},
	  		{	headerName: "状态", field: "state", width: 100,
	  			cellRenderer: (params) => {
	  				if (params.value == 0) {
	  					return '启用';
	  				} else {
	  					return '停用';
	  				}
	  			}
        },
        { headerName: "创建人", field: "creator", width: 120 },
        { headerName: "创建时间", field: "createDate", width: 150 },
        { headerName: "修改人", field: "modifyer", width: 120 },
        { headerName: "修改时间", field: "modifyDate", width: 150 },
	  	];
  
    },
    mounted(){
		  this.search();
		 	this.getFactoryList();
			this.getPurcheaserList();
    },
    methods:{
      /**
       * @vuese
       * 查询方法
			 * 
			 * @arg 参数是布尔值， true就是点击触发，false就是非点击触发
       */
      search(isClick){
				this.pageInfo.currentPage = isClick ? 1 : this.pageInfo.currentPage;
				this.loading = true;
			  let param = {
			  	...this.formSearch,
          ...this.pageInfo,
				};
				param.state = this.formSearch.state ? 1 : 0;
			  _Api
			  	.searchPurchaserFactory(param)
			  	.then(res => {
			  		this.loading = false;
			  		if (res.data.code == 1) {
			  			this.rowData = res.data.rows;
			  			this.total = res.data.total
			  			this.$refs.agGridComponent.gridOptions.api.setRowData(this.rowData);
			  		} else {
			  			this.$alert(res.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
			  		}
			  	})
			  	.catch(err => {
			  		this.loading = false;
			  		this.$alert(err.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
			  	});
      },
      /**
       * @vuese
       * 新增/编辑采购员工厂方法
			 * 
			 * @arg 参数是布尔值， true就是保存并继续，false保存
       */
      addPurcheaser(isContinue){
				this.$refs['formPurchaserFactory'].validate((valid) => {
				  if (valid) {
            this.loadingDia = true;
			      let param = {
							...this.formPurchaserFactory
						}
			      _Api[this.isEdit?'editPurcheaserFactory':'addPurcheaserFactory'](param)
				    	.then(res => {
				    		this.loadingDia = false;
				    		if (res.data.code == 1) {
									this.$message({ message: "新增成功", type: "success" });
									this.clearParamter();//清空表单
				    			this.search()//刷新数据
									if (!isContinue) {//保存并继续
				    				this.closeDia();
				    			}
				    		} else {
				    			this.$alert(res.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
				    		}
				    	})
				    	.catch(err => {
				    		this.loadingDia = false;
				    		this.$alert(err.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
				    	});
          }
        });
      },

      /**
       * @vuese
       * 停/启用采购员工厂
       */
      isProhibitPurcheaserFactory(){
				let row = this.$refs.agGridComponent.gridOptions.api.getSelectedRows();
        if(row.length <= 0){
          this.$alert("提示：请至少选择一条数据", {
				    showClose: false,
				    confirmButtonText: "确定",
            customClass: "alertPrompt"					
          });
          return
        }

        let param = {
					ids: row.map(v=>v.id),
					modifyerId: this.$global.user.id,
					modifyer: this.$global.user.employeeName//修改人
			  }
        this.$confirm(`是否${this.formSearch.state ? '启用' : '停用'}这些配置`, "消息提示", {
			  	confirmButtonText: "确定",
			  	cancelButtonText: "取消",
			  	distinguishCancelAndClose: true
			  }).then(() => {
			  	this.loading = true;
			  	_Api
			  		.isProhibitPurchaserFactory(param)
			  		.then(res => {
			  			this.loading = false;
			  			if (res.data.code == 1) {
			  				this.$message({
			  					message: `${this.formSearch.state ? '启用' : '停用'}成功！`,
			  					type: "success"
			  				});
			  				this.search();//刷新
			  			} else {
			  				this.$alert(res.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
			  			}
			  		})
			  		.catch(err => {
			  			this.loading = false;
			  			this.$alert(err.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
			  		});
			  })
      },

			/**
			 * @vuese 
			 * 获取全部采购员方法
			 */
			getPurcheaserList(){
				this.loadingDia = true;
			  _Api
			  	.getAllPurchaserList()
			  	.then(res => {
			  		this.loadingDia = false;
			  		if (res.data.code == 1) {
							this.optionsPurcheaser = res.data.rows;
							this.optionsTempPurcheaser = res.data.rows;
			  		} else {
			  			this.$alert(res.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
			  		}
			  	})
			  	.catch(err => {
			  		this.loadingDia = false;
			  		this.$alert(err.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
					});
			},

			/**
			 * @vuese
			 * 获取工厂列表方法
			 */
			getFactoryList(){
				this.loadingDia = true;
			  _Api
			  	.getFactoryList()
			  	.then(res => {
			  		this.loadingDia = false;
			  		if (res.data.code == 1) {
							this.optionsFactory = res.data.rows;
							this.optionsTempFactory = res.data.rows;
			  		} else {
			  			this.$alert(res.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
			  		}
			  	})
			  	.catch(err => {
			  		this.loadingDia = false;
			  		this.$alert(err.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
			  	});
			},

      /**
       * @vuese
       * 打开新增/编辑采购员弹框方法
			 * 
			 * @arg isEdit true编辑，false：新增
       */
      openPurchaserFactoryDia( isEdit ){  
				//编辑
				if( isEdit ){
					let row = this.$refs.agGridComponent.gridOptions.api.getSelectedRows();
        	if(row.length != 1 ){
        	  this.$alert("提示：请选择一位采购员", {
					    showClose: false,
					    confirmButtonText: "确定",
        	    customClass: "alertPrompt"					
        	  });
        	  return
					}
					//赋值
					for(let key in this.formPurchaserFactory){
						this.formPurchaserFactory[key] = row[0][key];
					}
					this.formPurchaserFactory.id = row[0].id;
					this.formPurchaserFactory.modifyerId = this.$global.user.id,
					this.formPurchaserFactory.modifyer = this.$global.user.employeeName//修改人
				}
				//新增
				else{
					this.formPurchaserFactory.creatorId = this.$global.user.id;
					this.formPurchaserFactory.creator = this.$global.user.employeeName//创建人
				}
				this.isEdit = isEdit;
				this.diaPurcheaserFactory = true;
      },
      
      /**
       * @vuese
       * 改变页脚总条数方法
			 * 
			 * @arg 参数是 int 值，代表一页有多少条数据
       */
		  handleSizeChange (val) {
				this.pageInfo.pageSize = val;
				this.pageInfo.currentPage = 1;
		  	this.search();
		  },

      /**
       * @vuese
       * 翻页方法
			 * 
			 * @arg 参数是 int 值，代表页数
       */
		  handleCurrentChange (val) {
		  	this.pageInfo.currentPage = val;
		  	this.search();
      },
      
      /**
       * @vuese
       * 清空参数方法
       */
      clearParamter(){
        this.formPurchaserFactory = { 
          plantCode: '',
					sapNum: '',
					state: 0,
					adminFlag: 0
        }
        this.$refs.formPurchaserFactory.resetFields();
      },

      /**
       * @vuese
       * 关闭弹框方法
       */
		  closeDia() {
        this.diaPurcheaserFactory = false;
        this.clearParamter();
			},
			
			/**
			 * @vuese
			 * 过滤采购员
			 * 
			 * @arg 参数是String 这是个sapNum,用于过滤
			 */
			filterSupplier (value) {
				if (value != '') {
					this.optionsPurcheaser = this.optionsTempPurcheaser.filter(item => item.sapNum.indexOf(value) > -1 || item.purcheaserName.indexOf(value) > -1)
				} else {
					this.optionsPurcheaser = this.optionsTempPurcheaser
				}
			},

			/**
			 * @vuese
			 * 过滤工厂
			 * 
			 * @arg value:传入的是检索值, 用于过滤
			 */
			filterFactory (value) {
				if (value != '') {
					this.optionsFactory = this.optionsTempFactory.filter(item => item.plantCode.indexOf(value) > -1 || item.plantName.indexOf(value) > -1)
				} else {
					this.optionsFactory = this.optionsTempFactory
				}
			}
    }
  }
</script>
  
